<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="商品管理" ref="navbar" ></fa-navbar>
		<view class="u-p-20 u-bg-white u-flex u-col-center" style="width: 94%;margin: 15px auto;">
			<view class="u-flex-1"  style="width: 80%;font-size: 16px;">
				<view>商品管理</view>
			</view>

			<view class="u-p-l-20 u-p-r-5 u-flex u-col-center" @click="goPage('/pages/my/user_xiaoxi', true)" style="line-height: 24px;">
				消息<span style="font-size: 12px;color: #19be6b;margin-left: 5px;">({{number}})</span>
			</view>
			
		</view>
		<!-- 汇演列表 -->
		<view class="content" style="overflow-y: hidden;margin-top: 10px;">
			<view class="content_div" style="width: 600px">
				<!-- 表头 -->
				<view class="header">
					<view class="cell" style="width: 20%">名称</view>
					<view class="cell" style="width: 20%">寄存</view>
					<view class="cell" style="width: 20%">实际库存</view>
					<view class="cell" style="width: 20%" v-if="glkc_key">操作</view>
					<view class="cell" style="width: 20%" v-if="ckcbj_key">成本价</view>
					<view class="cell" style="width: 20%">价格</view>
				</view>
				<!-- 数据行 -->
				<view class="row" v-for="(item, index) in tableData" :key="index" style="padding-left: 2%;">
					<view class="cell" style="width: 20%;">{{ item.goods_name }}</view>
					<view class="cell" style="width: 20%">{{ item.ji_num }}</view>
					<view class="cell" style="width: 20%">{{ item.stock }}</view>
					<view class="cell" style="width: 20%" @click="goDetail(item)" v-if="glkc_key">管理</view>
					<view class="cell" style="width: 20%" v-if="ckcbj_key">{{ item.cost_price }}</view>
					<view class="cell" style="width: 20%">{{ item.price }}</view>
					
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<!-- <view class="u-p-t-30 u-p-b-30" v-if="list.length">
			<u-loadmore bg-color="#ffffff" :status="has_more ? status : 'nomore'" />
		</view> -->
		<!-- 加载状态提示 -->
		<!-- <view class="loading-tip">
		    <text v-if="isLoading">加载中...</text>
		    <text v-if="!hasMore">没有更多数据了</text>
		</view> -->
		<!-- 空数据 -->
		<!-- <view class="fa-empty" v-if="!list.length">
			<u-empty></u-empty>
		</view> -->
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:0,
				user_id: 0,
				value: 0,
				ku_type:0,
				shijjian: '',
				startDate:'',
				endDate:'',
				range: [
					{ value: 0, text: "全部" },
					{ value: 1, text: "当天" },
					{ value: 2, text: "本周" },
					{ value: 3, text: "本月" },
				],
				is_show:1,
				bgColor:'#f9f9f9',
				isTab: false,
				tabwidth: 40,
				tabList: [],
				current: 0,
				scrollTop: 0,
				list: [],
				status: 'loadmore',
				has_more: false,
				page: 1,
				channel_id: 0,
				is_update: false,
				options: [],
				tableData: [],
				page: 1,
				pageSize: 5,
				isLoading: false,
				hasMore: true,
				show: false,
				mode: 'range',
				ckcbj_key:0,
				glkc_key:0,
			};
		},
		onLoad(e) {
			let query = e || {};
			this.user_id = query.user_id || 0;
			this.is_update = true;
			this.getArchives();
			this.getNumber();
			// this.getKuType();
			if (this.vuex_token) {
				this.getUserIndex();
				const ckcbj = uni.getStorageSync('ckcbj_key');
				if(ckcbj){
					this.ckcbj_key = ckcbj;
				}
				console.log(ckcbj,'ckcbj')
				const glkc = uni.getStorageSync('glkc_key');
				if(glkc){
					this.glkc_key = glkc;
				}
				console.log(glkc,'glkc')
			} else {
				this.$u.vuex('vuex_user', {});
			}
		},
		methods: {
			getUserIndex() {
				let apptype = '';
				let platform = '';
				// #ifdef MP-WEIXIN
				platform = 'wechat';
				apptype = 'miniapp';
				// #endif
				this.$api.getUserIndex({ apptype, platform }).then(res => {
					uni.stopPullDownRefresh();
					if (res.code) {
						this.$u.vuex('vuex_user', res.data.userInfo);
			
						if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
							// 弹窗每次登录状态只提示一次
							this.$u.vuex('vuex_setting.prompted', true);
							uni.showModal({
								title: '温馨提示',
								confirmText: '去设置',
								cancelText: '取消',
								showCancel: true,
								content: '当前未设置昵称，请设置昵称后再继续操作',
								success: (res) => {
			
									if (res.confirm) {
										this.$u.route("/pages/my/profile");
									} else if (res.cancel) {
			
									}
								}
							});
						}
					}
				});
			},
			change(e) {
				console.log(e);
				if(e){
					this.startDate = e.startDate;
					this.endDate = e.endDate;
					this.shijjian = e.startDate+' 至 '+e.endDate;
				}
			},
			// getKuType: async function() {
			// 	let data = {};
			// 	let res = await this.$api.getkutype(data);
			// 	this.ku_type = res.data
			// },
			getNumber: async function() {
				let data = {};
				let res = await this.$api.getNumber(data);
				this.number = res.data;
			},
			getArchives: async function() {
				let data = {};
				let res = await this.$api.goodsList(data);
				console.log(res,'132')
				this.tableData = this.tableData.concat(res.data);
			},
			click(index, index1) {
				this.list[index].show = false;
				if (index1 == 1) {
					this.$api.deleteArchives({ id: this.list[index].id }).then(res => {
						this.$u.toast(res.msg);
						if (res.code) {
							this.list.splice(index, 1);
						}
					})
				} else {
					this.$u.route('/pages/publish/channel', { archives_id: this.list[index].id });
				}
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				});
			},
			goDetail(item, index) {
				let page = '/pages/my/spgl_detail';
				this.goPage(page + '?goods_id=' + item.id);
			},
			reload() {
				this.is_update = true;
				this.getArchives();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getArchives();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	.badge {
		background-color: blue;
		color: white;
	}
	._btn{
		border: none;
		background: #e0ebdd;
		line-height: 34px;
		font-size: 14px;
		font-family: '微软雅黑';
	}
	.article {
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		width: 100vw;

		.left {
			image {
				width: 200rpx;
				height: 150rpx;
				flex: 0 0 120rpx;
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;

			.content {
				margin-bottom: 10rpx;

				.flag {
					display: inline-block;
				}
			}
		}
	}
	
	.c_date_left{
		width: 29%;float: left;font-size: 14px;line-height: 35px;text-align: center;
	}
	.c_date_right{
		width: 70%;float: left;line-height: 35px;
	}
	.u-bg-white{
		background: #f9f9f9;
	}
	.uni-select {
		border: none!important;
	}
	.container {
	  padding: 20rpx;
	  background-color: #ffffff;
	}
	
	.header, .row {
	  display: flex;
	  flex-wrap: nowrap;
	  border-bottom: 1rpx solid #e0e0e0;
	}
	
	.header {
	  background-color: #e0ebdd;
	  font-weight: bold;
	}
	
	.cell {
	  padding: 20rpx 10rpx;
	  border-right: 1rpx solid #e0e0e0;
	  font-size: 14px;
	  color: #333;
	  text-align: center;
	  line-height: 32px;
	  font-weight: normal;
	  font-family: '微软雅黑';
	}
	
	.last {
	  border-right: none !important;
	}
	
	/* 适配不同屏幕尺寸 */
	@media (max-width: 375px) {
	  .cell {
	    font-size: 24rpx;
	    padding: 15rpx 8rpx;
	  }
	}
</style>
